import styles from "./index.module.css"
import {useLayoutEffect} from "react";
import clsx from "clsx";
import Lenis from "lenis";

function Scroll() {
    useLayoutEffect(() => {
        const wrapperEl = document.getElementById("wrapper");
        const contentEl = document.getElementById("content");
        const lenis = new Lenis({
            wrapper: wrapperEl,
            content: contentEl,
            smooth: true,
            lerp: 0.08,
        });

        function raf(time) {
            lenis.raf(time);
            requestAnimationFrame(raf);
        }
        requestAnimationFrame(raf);

        return () => lenis.destroy();
    }, []);


    return <div id="wrapper" className={styles.wrapper}>
        <div id="content" className={clsx(styles.content)}>
            <div className={styles.box}></div>
            <div className={styles.box}></div>
            <div className={styles.box}></div>
            <div className={styles.box}></div>
        </div>
    </div>
}

export default Scroll;